<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item size="mini">
        <el-input v-model="resourceQueryObj.resourceContent" placeholder="资源名称" @change="getResourceList(0)"/>
      </el-form-item>
      <el-form-item size="mini">
        <el-input v-model="resourceQueryObj.propertiesKey" placeholder="属性键" @change="getResourceList(0)"/>
      </el-form-item>
      <el-form-item size="mini">
        <el-input v-model="resourceQueryObj.propertiesValue" placeholder="属性值" @change="getResourceList(0)"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getResourceList()" size="mini">搜索</el-button>
      <el-button type="default" icon="el-icon-refresh" @click="resetData()" size="mini">重置</el-button>
    </el-form>

    <!-- 新增、导入、导出按钮   -->
    <div class="buttonClass">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="openAddResource"
      >新增
      </el-button>

<!--      <el-button-->
<!--        type="success"-->
<!--        plain-->
<!--        icon="el-icon-upload2"-->
<!--        size="mini"-->
<!--        @click="handleImport"-->
<!--      >导入-->
<!--      </el-button>-->

<!--      <el-button-->
<!--        type="warning"-->
<!--        plain-->
<!--        icon="el-icon-download"-->
<!--        size="mini"-->
<!--        @click="handleExport"-->
<!--      >导出-->
<!--      </el-button>-->

    </div>

    <!-- 资源列表 -->
    <el-table
      :data="resourceList"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      style="width: 100%;margin-bottom: 20px;"
      border fit highlight-current-row>

      <el-table-column prop="resourceCode" label="资源代码"/>

      <el-table-column prop="resourceContent" label="资源内容"/>

      <el-table-column prop="conceptName" label="属于知识点名称"/>

      <el-table-column prop="conceptType" label="属于知识点类型">
        <template slot-scope="scope">
          <div v-if="scope.row.conceptType === 1">评测</div>
          <div v-else>指导</div>
        </template>
      </el-table-column>

      <el-table-column prop="propertiesKey" label="属性键"/>

      <el-table-column prop="propertiesValue" label="属性值"/>

<!--      <el-table-column prop="createdByName" label="创建人"/>-->

      <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip/>

      <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip/>

      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <!--修改资源信息-->
          <el-tooltip class="item" effect="dark" content="修改资源信息" placement="top-start">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="openUpdateResourceDialogForm(scope.row)">
            </el-button>
          </el-tooltip>
          <!--删除资源信息-->
          <el-tooltip class="item" effect="dark" content="删除资源信息" placement="top-start">
            <el-button type="danger" size="mini" icon="el-icon-delete"
                       @click="deleteResourceById(scope.row.resourceId)">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      background
      layout="prev, pager, next"
      style="padding: 30px 0; text-align: center;"
      @current-change="getResourceList"
    />

    <!-- 修改或增加资源信息弹出框 -->
    <el-dialog title="新增 / 修改资源信息" :visible.sync="addOrUpdateResourceDialogFormVisible">
      <el-form :model="resourceInfo" ref="resourceInfoForm">
        <el-form-item label="属于知识点" label-width="120px">
          <el-select v-model="conceptCodeAndNameObj" value-key="conceptId" filterable clearable placeholder="请选择关联知识点">
            <el-option
              v-for="item in allConceptsIdAndNameList"
              :key="item.conceptId"
              :label="item.conceptCodeAndName"
              :value="item">

            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="属于知识点类型" label-width="120px">
          <el-select v-model = "resourceInfo.conceptType" placeholder="请选择关联知识点类型">
            <el-option
            v-for="item in conceptTypeList"
            :key="item.conceptType"
            :label="item.conceptTypeName"
            :value="item.conceptType">

            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="属性键" label-width="120px">
          <el-input v-model="resourceInfo.propertiesKey" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="属性值" label-width="120px">
          <el-input v-model="resourceInfo.propertiesValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="资源内容" prop="resourceContent" label-width="120px">
          <el-input v-model="resourceInfo.resourceContent" type="textarea"
                     autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveOrUpdateResource">确 定</el-button>
        <el-button @click="addOrUpdateResourceDialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import resource from '@/api/management/resource'
  import concept from '@/api/management/concept'

  export default {
    data() {
      return {
        page: 1,
        limit: 10,
        total: 0,
        resourceList: [],
        addOrUpdateResourceDialogFormVisible: false,
        nextResourceDialogFormVisible: false,
        // 弹框中的当前资源信息
        currentResource: {
          resourceId: '',
          resourceName: '',
          resourceCode: '',
          propertiesKey: '',
          propertiesValue: ''
        },
        // 新增或修改弹框中的资源信息
        resourceInfo: {
          conceptId: '',
          conceptName:'',
          resourceId: '',
          resourceContent: '',
          conceptCodeAndName:'',
          conceptType:'',
          propertiesKey: '',
          propertiesValue: ''
        },
        conceptCodeAndNameObj:{
          conceptId: '',
          conceptCode: '',
          conceptName:'',
          conceptCodeAndName:''
        },
        // 组合资源查询条件
        resourceQueryObj: {
          resourceContent: '',
          conceptName: '',
          propertiesKey: '',
          propertiesValue: '',
          createdByName: '',
          beginTime: '',
          updateTime: ''
        },
        allConceptsIdAndNameList: [
          {
            conceptId: '',
            conceptCode: '',
            conceptName: '',
            conceptCodeAndName: ''
          }
        ],
        // 资源属于知识点类型
        conceptTypeList:[
          {
            conceptType:'1',
            conceptTypeName:'评测'
          },
          {
            conceptType:'2',
            conceptTypeName:'指导'
          }
        ],
        // 更新资源信息回显的知识点信息
        conceptInfo:{}

      }
    },
    created() {
      this.getResourceList()
    },
    methods: {
      // 判断是新增还是修改
      saveOrUpdateResource() {
        if (this.resourceInfo.resourceId === undefined) {
          console.log("新增资源",this.resourceInfo.resourceId)
          this.addResource()
        } else {
          console.log("更新资源",this.resourceInfo.resourceId)
          this.updateResource()
        }
      },
      // 更新资源信息
      updateResource() {
        resource.updateResource(this.resourceInfo).then(res =>{
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
          // 刷新表格数据
          this.getResourceList()
          this.addOrUpdateResourceDialogFormVisible = false
        })
      },
      // 打开修改资源信息弹框
      openUpdateResourceDialogForm(currentResource) {
        // 清除缓存
        this.resourceInfo = {}
        this.conceptCodeAndNameObj = {}
        // 初始化下拉框，查询所有知识点的id、名称和代码
        concept.getConceptsIdAndName().then(res => {
          this.allConceptsIdAndNameList = res.data.allConceptsIdAndNameList
          this.allConceptsIdAndNameList.forEach(item => {
            item.conceptCodeAndName = item.conceptCode + '-' + item.conceptName
          })
        })
        // 回显信息
        this.resourceInfo = currentResource
        this.conceptCodeAndNameObj.conceptId = this.resourceInfo.conceptId
        this.conceptCodeAndNameObj.conceptName = this.resourceInfo.conceptName
        concept.getConceptById(this.conceptCodeAndNameObj.conceptId)
        .then(res => {
          this.conceptCodeAndNameObj.conceptCode = res.data.conceptInfo.conceptCode
          this.conceptCodeAndNameObj.conceptCodeAndName = res.data.conceptInfo.conceptCode+"-"+res.data.conceptInfo.conceptName
        })
        this.addOrUpdateResourceDialogFormVisible = true
      },
      // 新增资源信息
      addResource() {
        this.resourceInfo.conceptId = this.conceptCodeAndNameObj.conceptId
        this.resourceInfo.conceptName = this.conceptCodeAndNameObj.conceptName

        resource.addResource(this.resourceInfo)
          .then(res => {
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            // 刷新表格数据
            this.getResourceList()
            this.addOrUpdateResourceDialogFormVisible = false
          })
      },
      // 打开新增资源弹框
      openAddResource() {
        // 清除缓存
        // 清除缓存
        this.resourceInfo = {}
        this.conceptCodeAndNameObj = {}
        // 初始化下拉框，查询所有知识点的id、名称和代码
        concept.getConceptsIdAndName().then(res => {
          this.allConceptsIdAndNameList = res.data.allConceptsIdAndNameList
          this.allConceptsIdAndNameList.forEach(item => {
            item.conceptCodeAndName = item.conceptCode + '-' + item.conceptName
          })
        })
        // 打开弹框
        this.addOrUpdateResourceDialogFormVisible = true
      },
      // 根据资源id删除资源信息
      deleteResourceById(resourceId) {
        this.$confirm('此操作将删除改资源信息及下的目录、知识点、资源等信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //调用删除方法
          resource.deleteResource(resourceId)
            .then(response => {
              //提示删除成功
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              //刷新列表
              this.getResourceList()
            })
        })
      },
      // 获取资源列表
      getResourceList(page = 1) {
        this.page = page
        resource.getResourcesPage(this.page, this.limit, this.resourceQueryObj)
          .then(response => {
            this.resourceList = response.data.resourceList
            this.total = response.data.total
          })
      },
      // 重置搜索条件
      resetData() {
        //清空查询条件
        this.resourceQueryObj = {}
        // 重新查询所有数据
        this.getResourceList()
      },
      // 导入Excel
      handleImport() {

      },
      // 导出Excel
      handleExport() {

      }
    }
  }
</script>
<style>
  .buttonClass {
    padding-bottom: 20px;
  }

  .noBorder {
    border: 0px;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }


  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>


